<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
    <head>
        <title>Beautify G+ Options</title>
        <meta http-equiv="Content-Type" content="text/javascript; charset=utf-8" />
        <script type="text/javascript" src="./options/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="./options/jquery-ui-1.8.4.custom.min.js"></script>
        <script type="text/javascript" src="./options/farbtastic/farbtastic.js"></script>
        <script type="text/javascript" src="./options.js"></script>
		<script type="text/javascript">
		
		function enablesound() {
			if ($('#audioalert').is(':checked')) {
				$('#soundgong').removeAttr('disabled');
				$('#soundsonar').removeAttr('disabled');
				$('#audioreminder').removeAttr('disabled');
			} else {
				$('#soundgong').attr('disabled', true);
				$('#soundsonar').attr('disabled', true);
				$('#audioreminder').attr('disabled', true);
			} 
		}
		function enablesoundtimer(){
			if($('#audioreminder').is(':checked')) {
				$('#2min').removeAttr('disabled');
				$('#5min').removeAttr('disabled');
				$('#10min').removeAttr('disabled');
				$('#15min').removeAttr('disabled');
			} else {
				$('#2min').attr('disabled', true);
				$('#5min').attr('disabled', true);
				$('#10min').attr('disabled', true);
				$('#15min').attr('disabled', true);
			}
		}
		function playgong(){
			audio = document.getElementById('gongdiv');
			audio.play();
		}
		
		function playsonar(){
			audio = document.getElementById('sonardiv');
			audio.play();
		}
		
		function fixedchat(){
			if($('#left_sidebar_fixed').is(':checked')) {
				$('#chat_fixed').removeAttr('disabled');
			}
			else {
				$('#chat_fixed').attr('disabled', true);
			}
		}
		</script>
        <link rel="stylesheet" href="./options/farbtastic/farbtastic.css" type="text/css" />
        <link rel="stylesheet" href="./options/smoothness/jquery-ui-1.8.4.custom.css" />
		<link rel="stylesheet" href="./options/style.css" />
        <link rel="shortcut icon" type="image/png" href="./icons/icon16.png" />
    </head>
<body>
    <div id="content">
        <span id="saveNotification" class="ui-widget ui-state-highlight ui-corner-all">Your options have been saved. <b>Reloading all Google+ Tabs now.</b></span>
        <span id="resetNotification" class="ui-widget ui-state-error ui-corner-all">Resetting to default options.</span>
    	<ul id="menu">
        	<li><a href="#main_settings">Main Settings</a></li>
        	<li><a href="#style_settings">Style Settings</a></li>
	       	<li><a href="#tweaks_enhancements">Tweaks and Enhancements</a></li>
            <li><a href="#version_history">Version History</a></li>
            <li style="float:right;"><button id='resetButton'></button><button id='submitButton'></button></li>
        </ul>
        <div id="main_settings">
        	<div id="main_content">
                <div id="menu_position">
                <fieldset>
                    <legend>Google+ Options Link</legend>
                    <div class="option">
                        <strong>
                        	<label><input type="checkbox" id="optlink_main" />Place Options Menu in Google+</label>
                        </strong>
                        <p>(Otherwise rightclick on the Beautify G+ Icon in your Browserbar)</p>
                    </div>
                    <div class="option">
                        <strong>
                        	<label><input type="checkbox" id="reload_g" checked="checked" />Reload Google+ after saving changes</label>
                        </strong>
                    </div>
                </fieldset>
                </div>
                <div id="about_beautify_fb">
                <fieldset>
                    <legend>What is Beautify G+?</legend>
                    <p>
                    	Beautify G+ is an Extension for Chromium Based Browsers like Google Chrome, Iron or RockMelt.
                    </p>
                    <p>
                    	It's main purpouse is to make Google+ a bit nicer to look at, and somehow customize the Design by fixing the menus to allways have them where you need them.
                    </p>
                    <p>
                    	Although I am currently loaded with work, I try my best to keep this extension updated and working for all of its users.
                    </p>
                    <p>
                    	If you have any further Question, or want to submit a feature request, you can do that on the Extension Page. I hope you enjoy this extension, and stay tuned for future updates.<br /> - Christian
                    </p>
                </fieldset>
                </div>
                <div id="donate">
                <fieldset>
                    <legend>Donate to keep Beautify G+ alive</legend>
                    	<div id="paypal">
                            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                                <input type="hidden" name="cmd" value="_s-xclick" />
                                <input type="hidden" name="hosted_button_id" value="9YWPSPUTQMUZY" />
                                <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" />
                                <img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1" />
                            </form>
                    	</div>
                        <div id="paypal_arrow">
                        	<img src="./icons/left-arrow.gif" height="50px" style="float:left" alt="&lt;&lt;&lt;&lt;&lt;&lt;&lt;" />
                            <p>Even the smallest amount will help.</p><div class="c"></div>
                        </div>
				</fieldset>
                </div>
            </div>
            <div class="c"></div>
        </div>
        <div id="style_settings">
        	<div class="config">
		        <fieldset>
                    <legend>Positioning</legend>
                        <div id="style_settings_bars">
                        <h3><a href="#menu_bar">Menu Bar</a></h3>
                        <div id="menu_bar_options_container">
                            <div id="menu_bar_options" class="options">
                            <fieldset>
                                <legend>Options</legend>
                                    <p>
                                        <label><input id="menu_bar_fixed" type="checkbox" />Fixed Position</label>
                                    </p>
                            </fieldset>
                            </div>
                        </div>
                        <h3><a href="#user_input">Input area</a></h3>
                        <div id="user_input_bar_options_container">
                            <div id="user_input_bar_options" class="options">
                            <fieldset>
                                <legend>Options</legend>
                                    <p>
                                        <label><input id="user_input_fixed" type="checkbox" />Fixed Position</label>
                                    </p>
                            </fieldset>
                            </div>
                        </div>
                        <h3><a href="#left_sidebar">Left Sidebar</a></h3>
                        <div id="left_sidebar_options_container">
                            <div id="left_sidebar_options" class="options">
                            <fieldset>
                                <legend>Options</legend>
                                    <p>
                                        <label><input id="left_sidebar_fixed" type="checkbox" onClick="fixedchat()" />Fixed Position</label>
                                        <label><input id="chat_fixed" type="checkbox" />Fixed Chat</label>
                                    </p>
                            </fieldset>
                            </div>
                        </div>
                        <h3><a href="#right_sidebar">Right Sidebar</a></h3>
                        <div id="right_sidebar_options_container">
                            <div id="right_sidebar_options" class="options">
                            <fieldset>
                                <legend>Options</legend>
                                    <p>
                                        <label><input id="right_sidebar_fixed" type="checkbox" />Fixed Position</label>
                                    </p>
                            </fieldset>
                            </div>
                        </div>
                        </div>
                </fieldset>
                <div class="c"></div>
        	</div>
            <div class="help">
            </div>
            <div class="c"></div>
        </div>
        <div id="tweaks_enhancements">
            <fieldset>
                <legend>Favicon Notification</legend>
                <label><input type='checkbox' id='faviconalert' />Activate Favicon Notification</label><br />
            </fieldset>
            <fieldset>
                <legend>Audio Notification</legend>
                <label><input type='checkbox' id='audioalert' onclick="enablesound()" />Activate Audio Notification</label><br />
                <p>Sound Type<br />
                <label><input type="radio" id="soundgong" name="audiosound" value="gong" onclick="playgong()"> Gong</label><br />
                <label><input type="radio" id="soundsonar" name="audiosound" value="sonaer" onclick="playsonar()"> Sonar</label><br />
                </p>
                <label><input type='checkbox' id='audioreminder'onclick="enablesoundtimer()" />Activate Audio Notification Reminder</label><br />
                <p>Reminder Time<br />
                <label><input type="radio" id="2min" name="audiotimer" value="120000"> 2 Minutes</label><br />
                <label><input type="radio" id="5min" name="audiotimer" value="300000"> 5 Minutes</label><br />
                <label><input type="radio" id="10min" name="audiotimer" value="600000"> 10 Minutes</label><br />
                <label><input type="radio" id="15min" name="audiotimer" value="900000"> 15 Minutes</label><br />
                </p>
            </fieldset>
            <fieldset>
                <legend>Hide Sidebar Elements</legend>
                <label><input type='checkbox' id='hideSuggestions' />Hide Suggestions</label><br />
                <label><input type='checkbox' id='hideMobile' />Hide "mobile-version" advertisement</label><br />
            </fieldset>
        </div>
        <div id="version_history">
        <p>
            <b>0.1.0</b> <i>(11.07.2011)</i><br /><br />
            * Added Audio Notifications with reminder funktion<br />
            * Changed the style of the Favicon Notifications.<br />
            <br /><br /><br />
            <b>0.0.9</b> <i>(10.07.2011)</i><br /><br />
            * Fixed a bug with a white space on profile tab.<br />
            * Added invite to Google+ for new Beautify G+ users<br />
            <br /><br /><br />
            <b>0.0.7</b> <i>(09.07.2011)</i><br /><br />
            * Fixed a bug with a white space.<br />
            * Fixed a bug with hiding the "mobile-version" advertisement.<br />
            <br /><br /><br />
            <b>0.0.6</b> <i>(05.07.2011)</i><br /><br />
            * Option to keep chatlist fixed when left column is fixed<br />
            * Option to fix the user input area<br />
            <br /><br /><br />
            <b>0.0.5</b> <i>(04.07.2011)</i><br /><br />
            * Fixed position of left column now with moving chatlist<br />
            <br /><br /><br />
            <b>0.0.4</b> <i>(04.07.2011)</i><br /><br />
            * Added options to hide the friend suggestions and the "mobile-version" advertisement<br />
            * Added option to activate favicon notifications<br />
            <br /><br /><br />
            <b>0.0.3</b> <i>(01.07.2011)</i><br /><br />
            * Added options to fix left sidebar, right sidebar, and menubar<br />
            * Added option to hide elements<br />
            <br /><br /><br />
            <b>0.0.2</b> <i>(01.07.2011)</i><br /><br />
            * +1 any Website you are on<br />
            <br /><br /><br />
            <b>0.0.1</b> <i>(01.07.2011)</i><br /><br />
            * Fixed position of the menubar<br />
			* Fixed position of the left column<br />
            <br /><br /><br />
        </p>
        </div>
    </div>
    <div id="sounds" style="display:none;">
		<audio id="gongdiv" src="http://beautify.it/gplus/gong.ogg" style="display:none; visibility:hidden;"></audio>
		<audio id="sonardiv" src="http://beautify.it/gplus/sonar.ogg" style="display:none; visibility:hidden;"></audio>
    </div>
    <input type="text" id="version" style="display:none;" />
    <div id="update_notification" title="Update Notification" style="display:none;">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        	You have just Updated to Version 0.1.0, this is what is new:<br /><br /><br />
            * Added Audio Notifications with reminder funktion<br />
            * Changed the style of the Favicon Notifications.<br />
        </p>
    </div>
    <div id="invite_mailer" title="Your Invite to Google+" style="display:none;">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        	Thank you for using Beautify G+! If you dont have a Google+ account, you can get an invite here, by just entering your E-Mail address and klicking "Request Invite"<br /><br />            Due to the large amount of incomming requests, not everybody will get an invite. But about 50users will get an invite every day!<br /><br />
            Please fill in your E-Mail address here:<br /><br />
            <form id="invite_form" action="http://romeni.eu/invite_mailer.rwd" method="post">
            	<input id="invite_mailer_form" name="invite_mailer_form" type="text" /><br />
            </form>
        </p>
    </div>
</body>
</html>
